<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>role</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!-- 搜索条件 -->
<fieldset class="layui-elem-field">
    <legend>筛选条件</legend>
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-inline">
                <input type="text" id="sreach_username" placeholder="用户名称" class="layui-input">
            </div>

            <label class="layui-form-label">用户部门</label>
            <div class="layui-input-inline">
                <input type="text" id="sreach_departmentId" placeholder="用户部门" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-pane">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
            </div>
        </div>
    </div>
</fieldset>

<!-- 动态数据表格 -->
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="insert_data">新增数据</button>
    </div>
</script>

<script type="text/html" id="barDemo"> <!-- 通过script定义的html代码，默认是隐藏的，只有在js调用渲染时，才会出现 -->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="insert_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_goodsName" class="layui-input" placeholder="请输入商品名称">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_goodsNo" class="layui-input" placeholder="请输入商品编号">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="insert_goodsCreateTime"  readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">创建人员</label>
            <div class="layui-input-inline layui-form">
                <select name="insert_select" id="insert_userId">
                    <option value="" selected="">请选择人员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-inline">
                <input type="text" id="insert_goodsCount" class="layui-input" placeholder="请输入商品数量">
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="update_form">
    <div class="layui-field-box">
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品ID</label>
            <div class="layui-input-inline">
                <input type="text" id="update_id" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="update_goodsName" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-inline">
                <input type="text" id="update_goodsNo" class="layui-input" placeholder="请输入商品编号">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品管理员</label>
            <div class="layui-input-inline">
                <input type="text" id="update_userId" class="layui-input" placeholder="请输入商品管理员">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">生产日期</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="update_time" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品数量</label>
            <div class="layui-input-inline">
                <input type="text" id="update_goodsCount" class="layui-input" placeholder="请输入商品数量">
            </div>
        </div>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script src="/jquery/jquery-3.6.0.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });

    $("#iReset").click(function () {
        $("#sreach_goodsName").val("");
        $("#sreach_userId").val("");
        tableShow();
    });

    $("#searchVal").click(function () {
        let username = $("#sreach_username").val();
        let departmentId = $("#sreach_departmentId").val();
        let paramJSON = {username:username, departmentId:departmentId};
        tableShow(paramJSON);
    });

    var departmentArray = []; // 保存所有的部门
    var roleArray = [];        // 保存所有的权限
    var userArray=[];           //保存所有的用户
    // 读取所有的部门
    $.ajax({
        url:"/department/selectAll",   // 请求路径
        type:"get",            // 请求的方式，不区分大小写
        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        data: {
            myId: 123,
            name: "gxa"
        },
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            departmentArray = response.data;
        },
        error:function(response){
            console.log("出错返回: " + response);
            console.log("出错数据: " + JSON.stringify(response));
        }
    });

    // 读取所有的权限
    $.ajax({
        url:"/role/selectAll",   // 请求路径
        type:"get",            // 请求的方式，不区分大小写
        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        data: {
            myId: 123,
            name: "gxa"
        },
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            roleArray = response.data;
        },
        error:function(response){
            console.log("出错返回: " + response);
            console.log("出错数据: " + JSON.stringify(response));
        }
    });
//读取所有的用户
    $.ajax({
        url:"/user/selectAll",   // 请求路径
        type:"get",            // 请求的方式，不区分大小写
        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        // contentType:"application/json;charset=utf-8",
        data: {
            myId: 123,
            name: "gxa"
        },
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            userArray = response.data;
        },
        error:function(response){
            console.log("出错返回: " + response);
            console.log("出错数据: " + JSON.stringify(response));
        }
    });
    function tableShow(paramJSON) {
        if(!paramJSON) {             // 判断paramJSON对象不存在的时候，给它一个默认值
            paramJSON = {};
        }

        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,where: paramJSON
                ,url:'/goods/selectForPage'         // 相对路径与绝对路径
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{title:'ID', width:80, templet: function(data){
                            return '<em>'+ data.id +'</em>'
                        }}
                    ,{title:'商品名称', width:120, templet: function(data){
                            return '<em>'+ data.goodsName +'</em>'
                        }}
                    ,{title:'商品编号', width:120, templet: function(data){
                            return '<em>'+ data.goodsNo +'</em>'
                        }}
                    ,{title:'上架人员', width:120, templet: function(data){
                            return '<em>'+ data.user.username +'</em>'
                        }}
                    ,{title:'上架数量', width:120, templet: function(data){
                            return '<em>'+ data.goodsCount +'</em>'
                        }}
                    ,{title:'上架时间', width:200, templet: function(data){
                            return '<em>'+data.goodsCreateTime +'</em>'
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        // JSON.stringify(data);    // 它的作用是把一个对象(JSONObject   JSONArray)转成字符串形态
                        // JSON.parse("String");    // 把一个字符串转换成一个对象(JSONObject   JSONArray)
                        // 上述的两个方法，是隶属于JS原生的，不是LayUI，这两个方法如果转换的对象不是json类型的，那么会抛出错误
                        // layer.alert(JSON.stringify(data));
                        console.log(data);         // 此方法是把一个js中的对象或者字符串展示到页面的控制台中
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                    case 'insert_data':
                        //弹出表单
                        layer.open({
                            type: 1
                            ,title: '新增商品' //不显示标题栏
                            ,closeBtn: false
                            ,area: ['500px','500px']  // 宽和高
                            ,shade: 0.8
                            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,btn: ['新增', '取消']
                            ,btnAlign: 'c'
                            ,moveType: 1 //拖拽模式，0或者1
                            ,content: $('#insert_form').html()         // 引入自定义表单
                            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                                let goodsName = $("#insert_goodsName").val();
                                let goodsNo = $("#insert_goodsNo").val();
                                let goodsCreateTime = $("#insert_goodsCreateTime").val();
                                let userId = $("#insert_userId").val();
                                let goodsCount = $("#insert_goodsCount").val();
                                if(goodsName === "" || goodsName === "" ||
                                    goodsNo === "" || goodsNo=== "" ||
                                    // goodsCreateTime === "" || goodsCreateTime === "" ||
                                    userId === "" || userId === "" ||
                                    goodsCount=== ""||goodsCount=== "") {
                                    layer.msg("请填写完整信息!");
                                }
                                else {
                                    $.ajax({
                                        url:"/goods/insert",   // 请求路径
                                        type:"post",            // 请求的方式，不区分大小写
                                        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                        contentType:"application/json;charset=utf-8",
                                        data:JSON.stringify({
                                            goodsName:goodsName,
                                            goodsNo:goodsNo,
                                            goodsCreateTime:goodsCreateTime,
                                            userId:userId,
                                            goodsCount:goodsCount
                                        }),
                                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                                        success:function(response){
                                            console.log("返回: " + response);
                                            layer.msg(response.msg);
                                            if(response.code === 200) {
                                                layer.close(index);
                                                tableShow();
                                            }
                                        },
                                        error:function(response){
                                            console.log("出错返回: " + response);
                                            console.log("出错数据: " + JSON.stringify(response));
                                        }
                                    });
                                }
                            }
                            ,success: function(layero){
                                layui.use('laydate', function(){
                                    var laydate = layui.laydate;
                                    //日期  搜索的开始时间
                                    laydate.render({
                                        elem: '#insert_goodsCreateTime',
                                    });
                                });
                                for(i = 0; i < userArray.length; i++) {
                                    let user = userArray[i];
                                    $("#insert_userId").append("<option value='" + user.id + "'>"
                                        + user.username + "</option>");
                                }

                                // 初始化过程中，触发这里的函数代码
                                // 初始化form表单样式，并刷新select渲染
                                layui.use(['form'], function(){
                                    layui.form.render('select');
                                });
                            }
                        });
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        // obj.del();
                        $.ajax({
                            url:"/goods/deleteById",   // 请求路径
                            type:"post",            // 请求的方式，不区分大小写
                            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            data:{
                                id:data.id
                            },
                            datatype:"json",        // 返回类型，text文本、html页面、json数据
                            success:function(response){
                                console.log("返回: " + response);
                                layer.msg(response.msg);
                                tableShow();
                            },
                            error:function(response){
                                console.log("出错返回: " + response);
                                console.log("出错数据: " + JSON.stringify(response));
                            }
                        });
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    //弹出表单
                    layer.open({
                        type: 1
                        ,title: '编辑商品' //不显示标题栏
                        ,closeBtn: false
                        ,area: ['500px','500px']  // 宽和高
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['更新', '取消']
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: $('#update_form').html()         // 引入自定义表单
                        ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                            $.ajax({
                                url:"/goods/updateById",   // 请求路径
                                type:"post",            // 请求的方式，不区分大小写
                                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType:"application/json;charset=utf-8",
                                data:JSON.stringify({
                                    id:data.id,
                                    goodsName:$("#update_goodsName").val(),
                                    goodsNo:$("#update_goodsNo").val(),
                                    userId:$("#update_userId").val(),
                                    goodsCreateTime:$("#update_time").val(),
                                    goodsCount:$("#update_goodsCount").val(),
                                }),
                                datatype:"json",        // 返回类型，text文本、html页面、json数据
                                success:function(response){
                                    console.log("返回: " + response);
                                    layer.msg(response.msg);
                                    layer.close(index);
                                    tableShow();
                                },
                                error:function(response){
                                    console.log("出错返回: " + response);
                                    console.log("出错数据: " + JSON.stringify(response));
                                }
                            });
                        }
                        ,success: function(layero){
                            $("#update_id").val(data.id);
                            $("#update_goodsName").val(data.goodsName);
                            $("#update_goodsNo").val(data.goodsNo);
                            $("#update_userId").val(data.userId);
                            $("#update_time").val(data.goodsCreateTime);
                            $("#update_goodsCount").val(data.goodsCount);
                        }
                    });
                }
            });
        });
    }

    tableShow();

    // 新增数据弹出表单
    function openLayer(){

    }
</script>



</body>
</html>